<template>
  <div>
    <el-radio-group v-model="curTabKey" class="tabTypes" style="margin-bottom: 24px">
      <el-radio-button v-for="(tab, key) in tabs" :key="key" :label="key"> {{ tab.title }}</el-radio-button>
    </el-radio-group>
    <!--信息-->
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="pub-bg">
          <div class="flex-line center title">
            <p />综合信息
          </div>
          <statics-echarts />
        </div>
      </el-col>
      <!--地区分布-->
      <el-col :span="12">
        <div class=" pub-bg">
          <div class="flex-line center title">
            <p />地区分布
          </div>
          <area-echarts />
        </div>
      </el-col>
      <!--/地区分布-->
      <el-col :span="6">
        <div class=" pub-bg">
          <div class="flex-line center title">
            <p />年级分布
          </div>
          <el-row :gutter="20">
            <el-col v-for="(item, index) in gradeList" :key="index" :span="12">
              <div class="info-item">
                <p><span>{{ item.classesCount }}</span>个</p>
                <p><span>{{ item.childrenCount }}</span>人</p>
                <p class="text">{{ item.name }}</p>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <!--/信息-->
    <!--折线图-->
    <el-row :gutter="20" class="pt-20">
      <el-col :span="12">
        <div class="pub-bg">
          <div class="flex-line center title">
            <p />幼儿分布
          </div>
          <div id="chartsOne" class="echart-size" />
        </div>
      </el-col>
      <el-col :span="12">
        <div class="pub-bg">
          <div class="flex-line center title">
            <p />教保师、教职工分布
          </div>
          <div id="chartsTwo" class="echart-size" />
        </div>
      </el-col>
    </el-row>
    <!--/折线图-->
  </div>
</template>

<script>
// import echartsMixin from '@/components/Basic/Charts/mixins/resize'
// import echarts from 'echarts'
import * as echarts from 'echarts'
import { dashboard1, dashboard2 } from '@/api/dashboard'
import StaticsEcharts from '../../dataStatics/group/components/staticsEcharts'
import AreaEcharts from '../../dataStatics/group/components/areaEcharts'
export default {
  // mixins: [echartsMixin],
  components: {
    StaticsEcharts,
    AreaEcharts
  },
  data () {
    return {
      curTabKey: 0,
      tabs: [
        { key: 0, title: '综合态势' },
        { key: 1, title: '综合详细' },
        { key: 2, title: '运营态势' },
        { key: 3, title: '健康态势' }
      ],

      gradeList: [],
      staffList: [],
      childrenList: []
    }
  },
  watch: {
    curTabKey (val) {
      console.log(val)
      // this.getCourses()
    }
  },
  created () {

  },
  mounted () {
    // this.getDashboard1()
    this.getDashboard2()
    this.mapEchartFun()
  },
  methods: {
    getDashboard1 () {
      dashboard1().then(res => {
        console.log(res)
      })
    },

    getDashboard2 () {
      dashboard2().then(res => {
        console.log(res)
        this.gradeList = res.gradeCount
        this.staffList = res.staffCount
        this.childrenList = res.childrenCount

        this.staffChartsFun('Two')
        this.childrenChartsFun('One')
      })
    },

    mapEchartFun () {
      const myChart = echarts.init(document.getElementById('mapEchart'))
      // 指定图表的配置项和数据
      const option = {
        title: {
          text: ''
        },
        tooltip: {},
        // legend: {
        //   data: ['销量']
        // },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
          boundaryGap: false,
          axisLine: {
            show: false
            // color: '#009BFA',
            // lineStyle: {
            //   color: '#009BFA',
            // }
          },
          axisTick: {
            show: false
          },
          show: false
        },
        yAxis: {
          show: false,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#1B96D1'],
              width: 0.5,
              type: 'dashed'
            }
          }
        },
        series: [
          {
            symbolSize: 20,
            data: [
              [10.0, 8.04],
              [8.07, 6.95],
              [13.0, 7.58],
              [9.05, 8.81],
              [11.0, 8.33],
              [14.0, 7.66],
              [13.4, 6.81],
              [10.0, 6.33],
              [14.0, 8.96],
              [12.5, 6.82],
              [9.15, 7.2],
              [11.5, 7.2],
              [3.03, 4.23],
              [12.2, 7.83],
              [2.02, 4.47],
              [1.05, 3.33],
              [4.05, 4.96],
              [6.03, 7.24],
              [12.0, 6.26],
              [12.0, 8.84],
              [7.08, 5.82],
              [5.02, 5.68]
            ],
            type: 'scatter',
            color: '#0000FF'
          }
        ]
      }
      myChart.setOption(option)
    },

    staffChartsFun (type) {
      const names = []
      const teacherValues = []
      const staffValues = []
      this.staffList.forEach(x => {
        names.push(x.areaName)
        teacherValues.push(x.teacherCount)
        staffValues.push(x.staffCount)
      })
      const myChart = echarts.init(document.getElementById(`charts${type}`))
      // 指定图表的配置项和数据
      const option = {
        title: {
          text: ''
        },
        tooltip: {},
        // legend: {
        //   data: ['销量']
        // },
        xAxis: {
          type: 'category',
          axisTick: { show: false },
          data: names,
          axisLabel: {
            rotate: 60,
            fontSize: 8
          }
        },
        yAxis: {
        },
        series: [
          {
            name: '教职工',
            type: 'bar',
            data: staffValues
          }
          // {
          //   name: '教保师',
          //   type: 'bar',
          //   data: teacherValues,
          // }
        ]
      }
      myChart.setOption(option)
    },

    childrenChartsFun (type) {
      const names = []
      const childrenValues = []
      this.childrenList.forEach(x => {
        names.push(x.areaName)
        childrenValues.push(x.childrenCount)
      })
      const myChart = echarts.init(document.getElementById(`charts${type}`))
      // 指定图表的配置项和数据
      const option = {
        title: {
          text: ''
        },
        tooltip: {},
        // legend: {
        //   data: ['销量']
        // },
        xAxis: {
          type: 'category',
          axisTick: { show: false },
          data: names,
          axisLabel: {
            rotate: 60,
            fontSize: 8
          }
        },
        yAxis: {
        },
        series: [
          {
            name: '学生',
            type: 'bar',
            data: childrenValues
          }
        ]
      }
      myChart.setOption(option)
    }
  }

}
</script>

<style lang='scss' scoped>
.pub-bg {
  background: #fafafa;
  border-radius: 30px;
  padding: 20px;
}
.title {
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #6e645a;
  p {
    width: 5px;
    height: 20px;
    background: #6e645a;
    border-radius: 3px;
    margin-right: 5px;
  }
}
.echart-size {
  width: 100%;
  height: 400px;
}
.info-item {
  background: #fff;
  border-radius: 30px;
  padding: 10px 20px 20px 20px;
  margin-top: 20px;
  p {
    font-size: 14px;
    color: #666;
    span {
      color: #333333;
      font-size: 30px;
      font-weight: bold;
      padding-right: 5px;
      font-family: PingFang SC;
    }
    &.text {
      color: #333333;
    }
  }
}
.pie-size {
  width: 100%;
  height: 80px;
  margin: 20px 0 0 0;
}
::v-deep {
  .el-radio-button__inner {
    // color: #fff;
  }
}
</style>
